01_2_4 円環と面
面を使ったビジュアライズで重層的に表現する
サンプルコード：sketch01_2_4
https://gyazo.com/5932cfd0e1421a7f6fd29fa29cbf3755
面を描く方法
隣接する２点とその２点からX-Z平面への垂線が交わる2点で囲まれる四角形をビジュアライズする方法を考えます。図1を見てください。tは温度のプロット位置、dはtからX-Z平面に向けた垂線と平面が交わる位置を表します。
https://gyazo.com/2e1d008908e6f9ec783264362144b676
図1: X-Z平面を真横から見たイメージ（ #要清書 ）
面Aはt1、d1、t2、d2で囲まれた部分です。同様に面Bはt2、d2、t3、d3、面Cはt3、d3、t4、d4に囲まれていて、t2、d2は面Aと面Bが共有しています。また、t3とd3は面Bと面Cが共有しています。このような連続した四角形を描画するには、beginShape( QUAD_STRIP );を使用します。
beginShape( QUAD_STRIP ); 使い方の基本
beginShape( QUAD_STRIP )の使い方を、2次元の場合を例にして見てみましょう。8つの頂点からなる3つの面を例にします（図2）。8つの頂点はそれぞれ、V0〜V7までとします。
https://gyazo.com/39cba45b41c99df3e18818b4f20b86e3
図2: 8つの頂点からなる3つの面（ #要清書 ）
beginShape( QUAD_STRIP ); 〜 endShape( ); のあいだに8つの頂点の座標を記述します。頂点の記述の順序を間違えると正しく表現できないので注意しましょう。
beginShape( QUAD_STRIP );
vertex(0,0); //V0
vertex(0,50); //V1
vertex(30,0); //V2
vertex(35,55); //V3
vertex(70,-10);//V4
vertex(75,50); //V5
vertex(90,0); //V6
vertex(90,50); //V7
endShape();
頂点に色を与える方法
01_2_2_円環と線で使用したbeginShape( LINES );と同様に、beginShape( QUAD_STRIP )でも頂点ごとに個別の色を指定することができます。個別の色を頂点に指定した場合には、面が各点の色を補間した色で描画されます。
code: sketch01_2_4_example.pde
import peasy.*;
PeasyCam cam;
void setup() {
size(400, 400, P3D);
noStroke();
cam = new PeasyCam(this, 300);
}
void draw() {
background(255);
beginShape(QUAD_STRIP);
fill(0, 50, 255); //v0の色
vertex(-100, -100, 0); //v0の座標
fill(200, 200, 0); //v1の色
vertex(-100, 100, 0); //v1の座標
fill(0, 200, 0); //v2の色
vertex(100, -100, 0); //v2の座標
fill(200, 50, 0); //v3の色
vertex(100, 100, 0); //v3の座標
endShape();
}
https://gyazo.com/6f4b5c8e6dd2137d9da92e460d88c133
図3: 実行結果（ #要清書 ）
プロットを面でつなぐ
プロット位置の頂点と、X-Z平面の頂点を順々につないで面を描画します。
Depth Sort
点や線の描画ではあまり意識しませんでしたが、面を描画する上では面の前後関係がビジュアライズに大きな影響を与えます。そのため、面の前後関係から色の重なりを正確に表現するために、hint( )関数を使って「depth sort」を実行するようにレンダラーを設定します。depth sortの実行には時間がかかるためフレームレートが極端に落ちる場合があります。まずは、depth sortを指定せずにビジュアライズして形状を調整し、仕上げの際に実行すると良いでしょう。
code:sketch01_2_4.pde
void draw(){
...
hint(ENABLE_DEPTH_SORT); //DEPTH SORTを有効化
beginShape( QUAD_STRIP );
for(int i=0; i<verts.size(); i++){
fill( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha);//プロット位置の頂点の色
vertex(verts.get(i).x, verts.get(i).y, verts.get(i).z); //プロット位置の頂点
vertex(verts.get(i).x, 0, verts.get(i).z);//x-z平面上の頂点
}
endShape();
hint(DISABLE_DEPTH_SORT); //DEPTH SORTを無効化
...
}
Visualization
https://gyazo.com/7882088c097dbafe17cd6003e17bcbe1
sketch01_2_4 重層的な円環が強調されて、長い時間の経過を印象づけるビジュアルに。
平面付近を透明に
プロット位置を少し高くして（Yを増加）、平面付近を透明にしてみましょう。
code:sketch01_2_4_1.pde
void setup(){
...
y = -1 * ( map(data.temperature.get(i), 0, 50, 0, 100) +30 ); // yを30増加
...
}
void draw(){
...
hint(ENABLE_DEPTH_SORT); //DEPTH SORTを有効化
beginShape( QUAD_STRIP );
for(int i=0; i<verts.size(); i++){
fill( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha);//プロット位置の頂点の色
vertex(verts.get(i).x, verts.get(i).y, verts.get(i).z); //プロット位置の頂点
fill( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 10*plot_alpha);//x-z平面上の頂点の色
vertex(verts.get(i).x, 0, verts.get(i).z);//x-z平面上の頂点
}
endShape();
hint(DISABLE_DEPTH_SORT); //DEPTH SORTを無効化
...
}
Visualization
https://gyazo.com/5932cfd0e1421a7f6fd29fa29cbf3755
sketch01_2_4_1 背景に溶け込み、よりドラマチックになりました。